<template>
  <view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />举报管理
    </view>
    <view class="navBar">
      <view class="navItem" @click="navChange(0)" :class="navIndex == 0 ? 'active' : ''">收到</view>
      <view class="navItem" @click="navChange(1)" :class="navIndex == 1 ? 'active' : ''">发起</view>
    </view>
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 88rpx - 110rpx);'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
    >
      <view class="li" v-for="(item, index) in list" :key="index" @click="details(item.id)">
        <view class="li_1">
          <view class="jiedao"
            ><span class="titles"
              >{{
                item.businessType == 1
                  ? '举报房源'
                  : item.businessType == 2
                  ? '举报车源'
                  : item.businessType == 4
                  ? item.reportCategory == 4
                    ? '举报招聘'
                    : '举报简历'
                  : item.businessType == 5
                  ? '举报服务'
                  : item.businessType == 6
                  ? '举报帮友圈'
                  : '举报用户'
              }}：</span
            >
            <span class="titlesss" v-if="item.businessType != 3">{{ item.businessType==6?item.title|| "未命名用户"+'的帮友圈': item.title }}</span>
            <span class="titlesss" v-else>{{ item.remarks || '未命名用户' }}</span>
          </view>
          <view class="jiedao"
            ><span class="titles">举报原因：</span>
            <span class="titless" v-if="item.businessType != 3"
              >{{ item.reportType.split('|').join(',') }}({{ item.reportContent }})</span
            >
            <span class="titless" v-else>{{ item.reportContent }}</span>
          </view>
          <view class="jiedao"
            ><span class="titles">举报时间：</span
            ><span class="titless">{{ item.createDate }}</span>
          </view>
          <view class="jiedao"><span class="titles">举报图片：</span></view>
          <image
            :src="eim"
            v-for="(eim, index) in item.image"
            :key="index"
            mode="aspectFill"
            style="width: 100px; height: 100px; margin-right: 10px"
            @click.stop="preView(index, item)"
          />
          <template v-if="navIndex == 0">
            <view
              class="jiedao"
              style="margin-top: 20rpx"
              v-if="item.informantReplied && item.informantReplied != ''"
              ><span class="titles" style="width: 240rpx">管理员回复：</span
              ><span class="titless">{{ item.informantReplied }}</span></view
            >
            <view class="jiedao" v-if="item.repliedTime && item.repliedTime != ''"
              ><span class="titles">回复时间：</span
              ><span class="titless">{{ item.repliedTime }}</span></view
            >
          </template>
          <template v-else-if="navIndex == 1">
            <view
              class="jiedao"
              style="margin-top: 20rpx"
              v-if="item.informantReply && item.informantReply != ''"
              ><span class="titles" style="width: 240rpx">管理员回复：</span
              ><span class="titless">{{ item.informantReply }}</span></view
            >
            <view class="jiedao" v-if="item.replyTime && item.replyTime != ''"
              ><span class="titles">回复时间：</span
              ><span class="titless">{{ item.replyTime }}</span></view
            >
          </template>
        </view>
      </view>
      <view v-if="list.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="list.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 96
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        navIndex: 0,
        userInfo: uni.getStorageSync('Pduser'),
        pageSize: 10,
        pageNo: 1,
        trigger: false,
        downStatus: true,
        upStatus: true,
        list: [],
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad() {
      this.getData1()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      preView(i, item) {
        console.log(this.list)
        var that = this
        uni.previewImage({
          current: i,
          urls: item.image,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      navChange(index) {
        if (this.navIndex == index) {
          return
        } else this.navIndex = index
        this.list = []
        this.pageNo = 1
        this.downStatus = true
        if (this.navIndex == 0) {
          this.getData1()
        } else {
          this.getData()
        }
      },
      getData() {
        this.upStatus = false
        this.$myRequest
          .get('/mob/user/getMyReportRecord', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
          })
          .then((res) => {
            if (!res.page.list.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            res.page.list.forEach((el) => {
              if (el.image) {
                el.image = el.image.split('|')
              }
            })

            this.list = this.list.concat(res.page.list)
          })
      },

      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      getData1() {
        this.upStatus = false
        this.$myRequest
          .get('/mob/user/getReportMyRecord', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
          })
          .then((res) => {
            console.log(res)
            if (!res.page.list.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            res.page.list.forEach((el) => {
              if (el.image) {
                el.image = el.image.split('|')
              }
            })
            this.list = this.list.concat(res.page.list)
          })
      },
    },
  }
</script>

<style lang="less" scoped>
  .reply {
    width: 600rpx;
    min-height: 200rpx;
    border: 4rpx solid #aaaaaa;
    border-radius: 20rpx;
    margin: 0 auto;
    padding: 10rpx;
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      /* #ifdef MP */
      // top: 116rpx;
      /* #endif */
      /* #ifdef APP-PLUS || H5 */
      // top: 50%;
      // transform: translateY(-50%);
      /* #endif */
      left: 30rpx;
    }
  }

  .navBar {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    margin-bottom: 10rpx;

    .navItem {
      width: 50%;
      font-size: 32rpx;
      color: #333;
      text-align: center;
    }

    .active {
      font-size: 36rpx;
      color: #64b6a8;
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .list {
    padding-top: 2rpx solid rgb(241, 241, 241);

    .li {
      padding: 30rpx;
      background: #fff;
      border-bottom: 20rpx solid rgb(241, 241, 241);
    }

    .jiedao {
      margin-bottom: 16rpx;
      /* font-size: 32rpx; */
      line-height: 45rpx;
    }

    .jiedao:last-child {
      margin-bottom: 0;
    }

    .jiedao {
      /* color: #8b8a8a; */
      display: flex;
      align-items: flex-start;
      width: 100%;
      word-break: break-all;
      .titles {
        color: #8b8a8a;
        width: 100px;
      }

      .titless {
        color: #000;
        flex: 1;
      }
	  .titlesss{
		 color: #000;
		 flex: 1;
		     text-overflow: ellipsis;
		     white-space: nowrap;
		     width: 400rpx;
		     overflow: hidden; 
	  }
    }
	
  }
</style>
